<template>
  <div class="interview-container">
    <!-- 顶部导航盒子 -->
    <div class="top-box shadow">
      <van-nav-bar
        right-text="答题卡"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
        <template #left> <van-icon name="arrow-left" size="18" /> </template>
        <template #title>
          <span class="navbar-text"
            >面试题
            <span class="navbar-num">{{ questions.length }}</span>
          </span>
        </template>
      </van-nav-bar>
    </div>
    <!-- 主体部分盒子 -->
    <div class="main-box">
      <!-- 题目描述 -->
      <p class="question">
        {{ question.detail.title }}
      </p>
      <!-- 题目类型标签 -->
      <van-tag
        type="primary"
        color="#f7f4f5"
        text-color="#c3b4bd"
        v-for="(item, index) in question.detail.tag"
        :key="index"
      >
        <template #default>
          <span>{{ item }}</span>
        </template>
      </van-tag>
      <!-- 题目选项 -->
      <div class="options-box">
        <van-radio-group v-model="selectedOption">
          <div
            :class="{
              selected: selectedOption == 'A',
              rightAnswer: theRightAnswer == 'A',
              wrong:
                theRightAnswer != 'A' &&
                selectedOption == 'A' &&
                isRight != 'isRight',
            }"
            class="option"
          >
            <van-radio name="A"
              ><span class="content">A.{{ question.detail.option[0] }}</span>
              <van-icon
                v-show="
                  (isRight == true && selectedOption == 'A') ||
                  theRightAnswer == 'A'
                "
                name="success"
                color="#00FF00"
              />
              <van-icon
                v-show="isRight == false && selectedOption == 'A'"
                name="cross"
                color="#FF0000"
              />
            </van-radio>
          </div>
          <div
            :class="{
              selected: selectedOption == 'B',
              rightAnswer: theRightAnswer == 'B',
              wrong:
                theRightAnswer != 'B' &&
                selectedOption == 'B' &&
                isRight != 'isRight',
            }"
            class="option"
          >
            <van-radio name="B"
              ><span class="content">B.{{ question.detail.option[1] }}</span>
              <van-icon
                v-show="
                  (isRight == true && selectedOption == 'B') ||
                  theRightAnswer == 'B'
                "
                name="success"
                color="#00FF00"
              />
              <van-icon
                v-show="isRight == false && selectedOption == 'B'"
                name="cross"
                color="#FF0000"
              />
            </van-radio>
          </div>
          <div
            :class="{
              selected: selectedOption == 'C',
              rightAnswer: theRightAnswer == 'C',
              wrong:
                theRightAnswer != 'C' &&
                selectedOption == 'C' &&
                isRight != 'isRight',
            }"
            class="option"
          >
            <van-radio name="C"
              ><span class="content">C.{{ question.detail.option[2] }}</span>
              <van-icon
                v-show="
                  (isRight == true && selectedOption == 'C') ||
                  theRightAnswer == 'C'
                "
                name="success"
                color="#00FF00"
              />
              <van-icon
                v-show="isRight == false && selectedOption == 'C'"
                name="cross"
                color="#FF0000"
              />
            </van-radio>
          </div>
          <div
            :class="{
              selected: selectedOption == 'D',
              rightAnswer: theRightAnswer == 'D',
              wrong:
                theRightAnswer != 'D' &&
                selectedOption == 'D' &&
                isRight != 'isRight',
            }"
            class="option"
          >
            <van-radio name="D"
              ><span class="content">D.{{ question.detail.option[3] }}</span>
              <van-icon
                v-show="
                  (isRight == true && selectedOption == 'D') ||
                  theRightAnswer == 'D'
                "
                name="success"
                color="#00FF00"
              />
              <van-icon
                v-show="isRight == false && selectedOption == 'D'"
                name="cross"
                color="#FF0000"
              />
            </van-radio>
          </div>
        </van-radio-group>
      </div>
    </div>
    <!-- 底部盒子 -->
    <div class="bottom-box">
      <div class="content-wrap">
        <div class="left">
          <div class="icon-box">
            <div
              class="iconfirst"
              @click="collect"
              :class="{ active: isActive == 0 }"
            >
              <van-icon name="star-o" size="30px"> </van-icon>
              <span class="icontext">收藏</span>
            </div>
            <div
              class="iconsecond"
              @click="feedback"
              :class="{ active: isActive == 1 }"
            >
              <van-icon name="edit" size="30px"> </van-icon>
              <span class="icontext">反馈</span>
            </div>
          </div>
          <div class="index-box">
            <span>{{ questionNum + 1 }}</span>
            /{{ questions.length }}题
          </div>
        </div>
        <div class="right">
          <van-button
            type="danger"
            text="提交"
            @click="submitAnswer"
          ></van-button>
        </div>
      </div>
    </div>
    <!-- 提交答案后的解析盒子 -->
    <div class="answer-box" v-if="isRight != 'isRight'">
      <h3>答案解析</h3>
      <div class="theRightAnswer">正确答案：{{ theRightAnswer }}</div>
      <div class="info-box">
        <div class="info-box-item">难度：{{ difficulty }}</div>
        <div class="info-box-item">提交次数：{{ submitNum }}</div>
        <div class="info-box-item">正确次数：{{ correctNum }}</div>
      </div>
      <p class="desc">{{ answerAnalysis }}</p>
    </div>
    <!-- 反馈弹出框 -->
    <van-popup v-model="show">
      <div class="pop-wrap">
        <span class="pop-text">反馈意见</span>
        <van-field
          v-model="message"
          type="textarea"
          placeholder="请输入您的反馈意见"
          ref="textArea"
        >
        </van-field>
        <div class="button-wrap">
          <div class="cancel" @click="cancel">取消</div>
          <div class="submit" @click="submit">提交</div>
        </div>
      </div>
    </van-popup>
    <!-- 返回上一页面按钮对话框 -->
    <van-dialog
      v-model="showDialog"
      title="确认退出？"
      show-cancel-button
      @confirm="confirm"
    >
      <span class="dialog-text">下次重新开始刷题哦</span>
    </van-dialog>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import { mapState } from 'vuex'
import { submitAnswer, feedback, collectQuestion } from '@/api/test'
export default {
  name: 'Interview',
  data() {
    return {
      //选项选择的结果,对应name的值
      selectedOption: '',
      //正确答案
      theRightAnswer: '',
      //底部选择
      isActive: -1,
      //是否显示反馈弹出层
      show: false,
      //反馈的信息文字
      message: '',
      //是否显示返回上一页的对话框
      showDialog: false,
      //题目号数
      questionNum: 0,
      //提交后答案是否正确,初始值isRight要用来判断是否发送请求，刷新时要手动重置为isRight
      isRight: 'isRight',
      //题目难度
      difficulty: '',
      //题目提交次数
      submitNum: 0,
      //题目提交的正确次数
      correctNum: 0,
      //答案解析
      answerAnalysis: '',
    }
  },
  methods: {
    //提交试题
    async submitAnswer() {
      //整体提交的数据
      const data = {
        id: this.question.id,
        singleAnswer: this.selectedOption,
      }
      const res = await submitAnswer(data)
      this.isRight = res.data.isRight
      this.theRightAnswer = res.data.singleAnswer
      this.difficulty = res.data.difficulty
      this.submitNum = res.data.submitNum
      this.correctNum = res.data.correctNum
      this.answerAnalysis = res.data.answerAnalysis
    },

    //导航栏返回按钮
    onClickLeft() {
      this.showDialog = true
    },
    //返回按钮对话框确认按钮
    confirm() {
      this.$router.push('/test')
    },
    //导航栏查看答题卡按钮
    onClickRight() {
      Dialog({ message: '有手就行啊，懒得做了' })
    },
    //点击收藏图标
    async collect() {
      this.isActive = 0
      try {
        const data = {
          id: this.question.id,
        }
        await collectQuestion(data)
        this.$toast.success('收藏成功！')
      } catch (error) {
        console.log(error)
      }
    },
    //点击反馈按钮
    feedback() {
      this.isActive = 1
      this.show = true
      this.$nextTick(() => {
        return this.$refs.textArea.focus()
      })
    },
    //反馈弹出框取消按钮
    cancel() {
      this.show = false
      this.message = ''
    },
    //反馈弹出框提交按钮
    async submit() {
      //反馈数据整理
      const data = {
        content: this.message,
        question: this.question.id,
      }
      try {
        await feedback(data)
        this.$toast.success('反馈成功！')
        this.show = false
        this.message = ''
      } catch (error) {
        console.log(error)
      }
    },
  },
  computed: {
    ...mapState({
      questions: (state) => state.test.questions,
    }),
    //具体某题目
    question() {
      return this.questions[this.questionNum]
    },
  },
}
</script>

<style scoped lang="less">
//导航栏右侧按钮
::v-deep .van-nav-bar__text {
  color: #000;
}
//导航栏右侧按钮
::v-deep .van-nav-bar__left {
  .van-icon {
    color: #000;
  }
}
//导航栏中间清除隐藏效果
::v-deep .van-ellipsis {
  overflow: unset;
}
//单选框盒子
::v-deep .van-radio {
  height: 49px;
  border: 1px solid #f7f4f5;
  padding: 5px 16px;
  border-radius: 4px;
  color: #181a39;
}
//单选框前面图标的隐藏
::v-deep .van-radio__icon {
  display: none;
}
//底部按钮
::v-deep .van-button {
  width: 108px;
  height: 41px;
}
//反馈弹出框
::v-deep .van-field {
  height: 170px;
  padding: 0 17px;
}
::v-deep .van-field__control {
  height: 132px;
  background-color: #f7f4f5;
}
::v-deep .van-popup {
  border-radius: 10px;
}
//返回对话框文本
::v-deep .van-dialog__content {
  height: 50px;
  text-align: center;
  padding: auto;
  color: #767777;
  font-size: 14px;
}
//返回对话框标题
::v-deep .van-dialog__header {
  margin-bottom: 10px;
}
::v-deep .van-dialog__confirm {
  color: #3497fb;
}
//选项的布局
::v-deep .van-radio__label {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

//答案解析盒子的样式
.answer-box {
  width: 100%;
  padding: 20px;
  .theRightAnswer {
    margin: 20px 0;
    color: #1dc779;
    font-size: 16px;
  }
  .info-box {
    display: flex;
    justify-content: space-around;
    height: 27px;
    background-color: #f7f4f5;
    color: #545671;
    border-radius: 5px;
    line-height: 27px;
  }
  .desc {
    width: 100%;
    margin-top: 22px;
    text-align: justify;
    color: #181a39;
  }
}

.rightAnswer {
  background-color: #ddfad9;
}
.wrong {
  background-color: #ffefea;
}

//点击激活底部图标
.active {
  color: #ff0000;
}

//弹出对话框
.pop-wrap {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;

  .pop-text {
    font-size: 22px;
    text-align: center;
    font-weight: 700;
  }
  .button-wrap {
    width: 100%;
    display: flex;
    color: #181a39;
    font-size: 16px;
    text-align: center;
    .cancel {
      width: 50%;
    }
    .submit {
      width: 50%;
    }
  }
}

//页面
.interview-container {
  //顶部盒子
  .top-box {
    .navbar-text {
      font-size: 18px;
      position: relative;
      .navbar-num {
        font-size: 12px;
        position: absolute;
        top: -8px;
        right: -20px;
        color: #545671;
      }
    }
  }
  // 顶部阴影
  .shadow {
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 17%);
  }
  //主体题目盒子
  .main-box {
    width: 100%;
    height: 100%;
    padding: 22px 16px 11px;
    .question {
      margin: 17px 0;
      color: #181a39;
      font-size: 16px;
      text-align: justify;
    }
    .options-box {
      margin-top: 30px;
      padding-bottom: 35px;
      .option {
        margin-bottom: 17px;
      }
      .selected {
        border: 1px solid #b4b4bd;
        border-radius: 5px;
      }
    }
  }
  //底部盒子
  .bottom-box {
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: 84px;
    width: 100%;
    padding-top: 12px;
    .content-wrap {
      display: flex;
      height: 50px;
      padding: 0 16px;
      justify-content: space-between;
      .left {
        display: flex;
        width: 200px;
        justify-content: space-between;

        .icon-box {
          display: flex;

          .iconfirst {
            width: 45px;
            height: 45px;
            .icontext {
              display: block;
            }
          }
          .iconsecond {
            width: 45px;
            height: 45px;
            .icontext {
              display: block;
            }
          }
        }
        .index-box {
          text-align: center;
          line-height: 55px;

          span {
            color: #d12d3e;
            font-size: 24px;
          }
        }
      }
    }
  }
}
</style>
